<template>
    <div class="Group">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="文章首页" name="first">
                项目负责人：高炜铿
                <br>
                关联子任务：文章页面布局，基础框架搭建
                <br>
                完成时间：2024.04.26-2024.05.05
                <br>
                码云用户名：高炜铿
                <br>
                进度：
                <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
            </el-tab-pane>
            <el-tab-pane label="导航栏" name="second">
                项目负责人：欧阳志诚
                <br>
                关联子任务：分类页面布局，导航栏组件开发，页脚组件开发，对接各个组件接口
                <br>
                完成时间：2024.04.26-2024.05.05
                <br>
                码云用户名：醉笙吾友梦
                <br>
                进度：
                <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
            </el-tab-pane>
            <el-tab-pane label="登录页和忘记密码页" name="third">
                项目负责人：梁兆尉
                <br>
                关联子任务：登录页面布局，优化登录布局，忘记密码页面布局，优化忘记密码布局
                <br>
                完成时间：2024.04.26-2024.05.05
                <br>
                码云用户名：梁兆尉
                <br>
                进度：
                <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
            </el-tab-pane>
            <el-tab-pane label="注册页和讲解视频" name="fourth">
                项目负责人：郑晓增
                <br>
                关联子任务：注册页面布局，优化注册布局，录制讲解视频
                <br>
                完成时间：2024.04.26-2024.05.05
                <br>
                码云用户名：雨中漫步
                <br>
                进度：
                <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
            </el-tab-pane>
            <el-tab-pane label="课程详细" name="fifth">
                项目负责人：孔繁森
                <br>
                关联子任务：课程详细布局，优化课程详细布局
                <br>
                完成时间：2024.04.26-2024.05.05
                <br>
                码云用户名：kfxxs
                <br>
                进度：
                <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
            </el-tab-pane>
            <el-tab-pane label="作业提交记录" name="sixth">
                <img src="https://codelover.club/files/stutasks/userID_899/currNo_43/FgWcEZpN_a7ndp8WylMOc3G-V-Fr.png"
                    style="width: auto;height: 430px;margin-left: 80px;margin-top: -30px;object-fit: cover;">
            </el-tab-pane>
        </el-tabs>
    </div>
    <div class="return">
        <router-link to="/home" class="navbar-link">
            <el-button type="info">
                返回
            </el-button></router-link>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    max-width: 600px;
}

.Group {
    background-color: aqua;
    margin-top: -200px;
    margin-left: 200px;
}

.first,
.second,
.third,
.fourth,
.fifth {
    text-align: left;
}

.return {
    margin-top: 350px;
    margin-left: -480px;
}
</style>